<%--
  Created by IntelliJ IDEA.
  User: 33536
  Date: 2022/5/24
  Time: 16:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<title></title>
<%--    css   js--%>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/ajaxForm.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/echarts.min.js"></script>

<script>
    layui.use(['table','util','jquery','layer','form'],function () {
        var table=layui.table,util=layui.util,$=layui.jquery,layer=layui.layer,form=layui.form;

        //自定义验证规则
        form.verify({
            account: function(value, item){
                var min = item.getAtztribute('lay-min');
                if(value.length >= 3){
                    return '不能超过'+2+'位数';
                }
            },
            account1: function(value, item){
                var min = item.getAttribute('lay-min');
                if(value.length >= 4){
                    return '不能超过'+3+'位数';
                }
            },
            newmobile: function(value){
                if(value.length != 3){
                    return '只能输入三位数';
                }
            },
            chineseName: function (value) {
                let pattern = /[\u4e00-\u9fa5]/;//中文验证
                let txt = pattern.test(value);

                if (value.length < 1 || !txt) {
                    return '维修设备必须要有中文';
                }
            },
            // v_pass:[/^[\s]{1,3}$/,'长度不能超过三位数'],
            numberRequiredFalse:[/(^$)|^\d+$/,'只能填写数字'],//非必填项，填了就会进行验证
            username: function (value, item) { //value：表单的值、item：表单的DOM对象
                if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                    return '不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '首尾不能出现下划线\'_\'';
                }

            }
        });


        //监听form表单提交  模糊查询
        form.on('submit(search-btn)',function (d) {
            var floorId=$("#floorId").val();
            var huorName=$("#huorName").val();
            table.reload('demo',{//指定条件重载table
                page:{page:1},
                where:{     //条件
                    floorId:floorId,
                    huorName:huorName,
                },
            });
        });

        // //监听form表单提交  模糊查询  查看全部按钮
        // form.on('submit(quanbu-btn)',function (d) {
        //     location.reload("demo");//重新加载父页面表格
        // });

        //监听显示全部按钮
        $("#quanbu-btn").click(function () {
            location.reload('demo');
        });


    });

</script>
</head>
<body>

<div class="layui-tab layui-tab-card" >
    <ul class="layui-tab-title">
        <li class="layui-this">宿舍统计表</li>
        <li>宿舍楼栋统计图</li>
    </ul>
    <div class="layui-tab-content" style="height: 150px;">
        <div class="layui-tab-item layui-show">
            <div>
                <form class="layui-form">
                    <div class="layui-inline">楼栋:</div>
                    <div class="layui-input-inline">
                        <select name="floorId" lay-filter="floorId" id="floorId">
                            <option value=" ">--选择楼栋--</option>
                            <c:forEach items="${lou}" var="dept">
                                <option value="${dept.floorId}">${dept.floorName}</option>
                            </c:forEach>
                        </select>
                    </div>

                    <div class="layui-inline">宿舍名:</div>
                    <div class="layui-inline">
                        <input type="text" name="huorName" id="huorName" class="layui-input" lay-verify="numberRequiredFalse|account1"/>
                    </div>

                    <a class="layui-btn" lay-filter="search-btn" lay-submit lay-size="sm">搜索</a>
                    <a class="layui-btn" lay-filter="quanbu-btn"  lay-submit id="quanbu-btn" lay-size="sm">查看全部</a>
                    <%--        <a class="layui-btn" id="add-btn" lay-size="sm">添加宿舍</a>--%>
                </form>
            </div>
            <table class="layui-table" id="title" lay-filter="demo" lay-size="sm"
                   lay-data="{url:'${pageContext.request.contextPath}/xt/shuse',page:true,id:'demo'}"
            >
                <thead>
                <tr>
                    <th lay-data="{field:'huorId',sort:true}">宿舍编号</th>
                    <th lay-data="{field:'huorName',sort:true}">宿舍房号</th>
                    <th lay-data="{field:'addr',sort:true}">宿舍地址</th>
                    <th lay-data="{field:'count',sort:true}">宿舍人数</th>
                    <th lay-data="{field:'floorId',sort:true,templet:'<div>{{d.floorId}}栋</div>'}">楼栋id</th>
                    <th lay-data="{field:'numberBeds',sort:true}">床位数</th>
                    <th lay-data="{field:'kon',sort:true}">空位</th>
                </tr>
                </thead>
            </table>
        </div>
        <div class="layui-tab-item">
            <div id="main" style="width: 1000px;height:500px;"></div>
        </div>
    </div>
</div>
</body>
<script>

    $(document).ready(function(){
        //echarts进行初始化
        var myChart = echarts.init(document.getElementById("main"));
        myChart.setOption({
            //图标题
            title:{text: '宿舍人员统计图'},
            //图提示框
            tootip:{
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: []
            },
            series: [
                {
                    name: '床位',
                    type: 'bar',
                    data: []
                },
                {
                    name: '空床位',
                    type: 'bar',
                    data: []
                }
            ]
        });
        //使用jQuery中的$.get()获取data.json文件，使用done函数;
        //done(function(data))中data表示调用的函数返回的数据
        $.get('${pageContext.request.contextPath}/xt/shuseton').done(function(data){
            myChart.setOption({
                yAxis:{
                    name:'楼栋',
                    data:data.month

                },
                series:[{
                    data:data.amount1
                },
                {
                    data:data.amount2
                }]
            });
        });
    });
</script>
</html>
